<template>
  <div class="colums">
    <div class="colums_left">
      <div class="colums_left_top">
        <el-row style="padding: 5px 0 20px 15px;">
          <el-button type="primary" size="mini" round>发送</el-button>
          <el-button size="mini" round>保存待发</el-button>
          <el-button size="mini" round>调用模版</el-button>
          <el-button size="mini" round>存为模版</el-button>
          <el-button size="mini" round>打印</el-button>
        </el-row>
        <div class="set-form">
          <div class="set-label1">标题:</div>
          <el-input v-model="query.title" readonly size="mini" style="width: calc(100% - 440px);"></el-input>
          <el-select v-model="query.type" placeholder="请选择" size="mini" style="width: 100px; margin-left: 10px;">
            <el-option
              v-for="item in importantTypArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <div class="set-label2">关联项目:</div>
          <el-select v-model="query.type" placeholder="请选择" size="mini" style="width: 140px;">
            <el-option
              v-for="item in importantTypArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="set-form">
          <div class="set-label1">流程:</div>
          <el-input v-model="query.title" placeholder="发起者部门主管（协同）" disabled size="mini" style="width: calc(100% - 440px);"></el-input>
          <el-select v-model="query.type" placeholder="请选择" size="mini" style="width: 100px; margin-left: 10px;">
            <el-option
              v-for="item in importantTypArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <div class="set-label2">预归档到:</div>
          <el-select v-model="query.type" placeholder="请选择" size="mini" style="width: 140px;">
            <el-option
              v-for="item in importantTypArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="set-form" style="padding-left: 15px;">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :show-file-list="false">
            <i class="el-icon-paperclip" style="color: #409EFF;"></i>上传附件(最大500M)
          </el-upload>
          <span style="padding-left: 10px; cursor: pointer;"><i class="el-icon-document-checked" style="color: #409EFF;"></i>关联文档</span>
        </div>
      </div>
      <div class="colums_left_middle">
        <div class="middleForm ledger">
          <div class="el-dialog__title">审前调查</div>
          <el-form ref="ledgerForm" :model="ledgerForm" label-width="100px" class="el-dialog__body">
            <el-row>
              <el-col :span="16" class="coltitle">
                <el-form-item label="调查单位">
                  <formSelect v-model="ledgerForm.createdLeader" isUser="company" :parentSelectItem="selectItem" placeholder="请选择" />
                </el-form-item>
              </el-col>
              <el-col :span="8" class="coltitle">
                <el-form-item label="编制人">
                  <formSelect v-model="ledgerForm.createdLeader" :parentSelectItem="selectItem" placeholder="请选择" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16" class="coltitle">
                <el-form-item label="被审计对象">
                  <el-input v-model="ledgerForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="coltitle">
                <el-form-item label="编制日期">
                  <el-date-picker
                    class="datePicker"
                    v-model="ledgerForm.createdTime"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="title">基本信息</div>
            <el-row>
              <el-col :span="8" class="coltitle">
                <el-form-item label="项目编号" prop="manageLevel">
                  <el-select
                    v-model="ledgerForm.manageLevel"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    placeholder="输入关联项目编号"
                    :remote-method="remoteMethod"
                    :loading="loading">
                    <el-option
                      v-for="item in manageLevelList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16" class="coltitle">
                <el-form-item label="审计项目名称" prop="manageLevel">
                  <el-input v-model="ledgerForm.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="coltitle">
                <el-form-item label="项目状态" prop="teamType">
                  <el-select v-model="ledgerForm.projectProcess" filterable placeholder="请选择">
                  <el-option
                    v-for="item in projecStatusList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                  </el-option>
                </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="coltitle">
                <el-form-item label="审计类型" prop="planStatus">
                  <el-select v-model="ledgerForm.planStatus" filterable placeholder="请选择">
                  <el-option
                    v-for="item in auditStatusList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                  </el-option>
                </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="coltitle">
                <el-form-item label="审计子类型" prop="auditStatus">
                  <el-select
                    v-model="ledgerForm.manageLevel"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    :remote-method="remoteMethod"
                    :loading="loading">
                    <el-option
                      v-for="item in manageLevelList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="coltitle">
                <el-form-item label="项目进度" prop="auditType">

                </el-form-item>
              </el-col>
              <el-col :span="16" class="coltitle">
                <el-form-item label="审计区间" prop="planStatus">
                  <el-date-picker
                    style="width: 100%;"
                    v-model="auditArrayTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="(e) => datePicker(e, 'auditArrayTime')"
                    >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="title">计划分工</div>
            <el-row>
              <el-col :span="8" class="coltitle">
                <el-form-item label="调查负责人" prop="auditType">
                  <formSelect v-model="ledgerForm.createdLeader" :parentSelectItem="selectItem" placeholder="请选择" />
                </el-form-item>
              </el-col>
              <el-col :span="8" class="coltitle">
                <el-form-item label="调查小组成员" prop="auditType">
                  <formSelect v-model="ledgerForm.createdLeader" :multiple="true" :parentSelectItem="selectItem" placeholder="请选择" />
                </el-form-item>
              </el-col>
              <el-col :span="8" class="coltitle">
                <el-form-item label="调查时间" prop="planStatus">
                  <el-date-picker
                    style="width: 100%;"
                    v-model="auditArrayTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="(e) => datePicker(e, 'auditArrayTime')"
                    >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="申请调查分工" prop="textarea">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="ledgerForm.textarea">
                </el-input>
              </el-form-item>
            </el-row>
            <div class="title">调查内容</div>
            <el-row>
              <el-form-item label="基本情况" prop="textarea">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="ledgerForm.textarea">
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="经济环境（政策因素）" prop="textarea">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="ledgerForm.textarea">
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="行业现状和发展趋势" prop="textarea">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="ledgerForm.textarea">
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="审计程序与方法" prop="textarea">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="ledgerForm.textarea">
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="其他资料" prop="textarea">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="ledgerForm.textarea">
                </el-input>
              </el-form-item>
            </el-row>
            <div class="title">历年审计</div>
            <el-row>
              <el-col :span="12" class="coltitle">
                <el-form-item label="审计报告">
                  <el-button size="mini" round style="min-width: 150px;">详情</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="coltitle">
                <el-form-item label="工作底稿">
                  <el-button size="mini" round style="min-width: 150px;">详情</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="title">审批意见</div>
            <el-row>
              <el-form-item label="审批意见" prop="textarea">
                123
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <i class="leftIcon" :class="isLeft ? 'el-icon-arrow-right' : 'el-icon-arrow-left'" @click="isLeft = !isLeft"></i>
      </div>
      <div class="colums_left_bot">
        <div style="cursor: pointer;" @click="isBottom = !isBottom"><i class="botIcon" :class="isBottom ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>附言</div>
        <el-row v-if="isBottom">
          <el-input
            type="textarea"
            :autosize="{minRows: 5}"
            placeholder="2000字以内"
            v-model="ledgerForm.textarea">
          </el-input>
        </el-row>
      </div>
    </div>
    <div class="colums_right" v-if="isLeft">
      <el-tabs v-model="tabActiveName">
        <el-tab-pane label="相关数据" name="first">
          <div class="colums_right_box">
            <div class="colums_right_box_title">
              <span>我发起的数据（当前模板）</span>
              <span class="link"><i class="botIcon el-icon-question"></i>更多</span>
            </div>
            <ul class="template">
              <li>模版模版模版模版模版模版模版模版模版模版模版模版模版模版模版模版模版1</li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程预测" name="second">
          <div class="colums_right_box">
            <div class="colums_right_box_tips">基于流程模拟技术和行为大数据提供智能预测结果，供参考。</div>
            <div class="colums_right_box_typeBox">
              <div class="typeBox type1">
                <span>未完成节点</span>
                <span>1</span>
              </div>
              <div class="typeBox type2">
                <span>预计耗时</span>
                <span>-</span>
              </div>
              <div class="typeBox type3">
                <span>预计完成时间</span>
                <span>-</span>
              </div>
            </div>
            <div class="colums_right_box_end">
              <i class="el-icon-help"></i>
              <div class="endBox">
                <div class="arrow1"></div>
                <div class="arrow2"></div>
                <div class="item_content">
                  <p>发起者部门主管【协同】</p>
                  <p>执行人 <span class="botIcon">顾里央</span></p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程说明" name="third">

        </el-tab-pane>
        <el-tab-pane label="智能校验" name="forth">

        </el-tab-pane>
      </el-tabs>
    </div>
    <audited-view :auditedDialog="auditedDialog" @auditedClose="auditedClose" />
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import Tinymce from '@/components/Tinymce'
import print from 'vue-print-nb'
import FormSelect from "@/components/form/select";
import AuditedView from "@/components/audited/auditedView";
import {fetchList,getObj,delObj,submit} from "@/api/adis/base/auditedCompany";

export default {
  directives: {
    print
  },
  components: {
    Tinymce,
    AuditedView,
    FormSelect
  },
  // dictTypes: ['pay_type', 'deal_type', 'resource_usage'],
  data() {
    return {
      ls:{
        'background': 'white'
      },
      importBox: false,
      isEdit: false,
      isView: false,
      viewBox: false,
      formBox: false,
      formTitle: '',
      loading: false,
      isLeft: false,
      isBottom: false,
      query: {},
      importantTypArr: [
        {label: '普通', value: 0},
        {label: '重要', value: 1},
        {label: '非常重要', value: 2}
      ],
      projecStatusList: [
        {label: '上年结转', value: 0},
        {label: '本年新建', value: 1},
        {label: '年中调整', value: 2},
        {label: '结转下年', value: 3}
      ],
      auditStatusList: [
        {label: '财务审计', value: 0},
        {label: '经济责任审计', value: 1},
        {label: '建设项目审计', value: 2},
        {label: '经济效益审计', value: 3},
        {label: '信息系统审计', value: 4},
        {label: '内控控制审计', value: 5},
        {label: '风险管理审计', value: 6},
        {label: '专项审计', value: 7},
      ],
      tabActiveName: 'first',
      selectItem: [],
      manageLevelList: [],
      auditArrayTime: [],
      ledgerForm: {},
      form: {
        renterName: '',
        freeRentMonth: 0,
        totalCopies: 4,
        jfCopies: 3,
        moneyRentDeposits: [],
        value1: '',
        value2: '',
      },
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      data: [],
      printBox: false,
      print: {
        id: 'printArea',
        popTitle: '', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: '',
      },
      selectionRow: [],
      Authorization: '',
      fileList: [], // 文件
      auditedDialog: false
    }
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  created() {
    // this.onLoad(this.page);
    this.Authorization = 'Bearer ' + this.$store.getters.access_token
  },
  methods: {
    remoteMethod() {},
    handleSelectionChange(row) {
      this.selectionRow = row
    },
    submit() {
      this.$refs['optForm'].validate((valid) => {
        if (valid) {
          this.fileList && this.fileList.map((file) => {
            this.form.fileUrl = file.response ? file.response.data.url : file.url
          });
          this.loading = true;
          submit(this.form).then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.resetForm();
            this.onLoad(this.page);
          }, () => {
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
    showAddView() {
      this.formTitle = '新增';
      this.formBox = true;
      this.form = {};
    },
    showEditBox() {
      if (this.selectionRow.length === 1) {
        getObj(this.selectionRow.id).then((res) => {
          this.form = res.data.data;
          if(res.data.data.fileUrl) {
            this.fileList.push({url:res.data.data.fileUrl});
          }
          this.formTitle = '编辑';
          this.formBox = true;
          this.isEdit = true;
        });
      } else {
        this.$message({
          type: "warning",
          message: "请选择一条记录!"
        });
      }
    },
    showViewBox(row) {
      getObj(this.selectionRow.id).then((res) => {
        this.form = res.data.data;
        this.viewBox = true;
        this.isView = true;
      });
    },
    showMove() {
      if (this.selectionRow.length > 0) {
        let ids = []
        this.selectionRow.forEach(element => {
          ids.push(element.id)
        });
        getObj(ids.join(',')).then((res) => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.onLoad(this.page);
        });
      } else {
        this.$message({
          type: "warning",
          message: "请选择记录!"
        });
      }
    },
    resetForm() {
      this.formBox = false;
      this.viewBox = false;
      this.isEdit = false;
      this.isView = false;
      this.form = null;
      this.formTitle = '';
      this.$refs['optForm'] && this.$refs['optForm'].resetFields();
      this.viewBox = false;
      this.printBox = false;
    },
    onSearch() {
      this.page.current = 1;
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.current = 1;
      this.onLoad(this.page);
    },
    currentChange(current) {
      this.page.current = current;
      this.onLoad(this.page);
    },
    sizeChange(size) {
      this.page.size = size;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      fetchList(Object.assign(params, this.query, page)).then(res => {
        this.loading = false;
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
      }, () => {
        this.loading = false;
      });
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handlePreview(file) {
      window.open(file.url ? file.url : file.response.data.url)
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    auditedClose() {
      this.auditedDialog = false
    }
  }
};
</script>

<style>
.colums {
  display: flex;
  height: calc(100vh - 104px);
}
.colums_left {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}
.colums_left_top {
  font-size: 13px;
  color: #222222;
}
.colums_left_middle {
  flex: 1 1;
  width: calc(100% - 10px);
  background-color: #ffffff;
  position: relative;
}
.middleForm {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 30px 0;
  overflow: scroll;
}
.middleForm .el-dialog__body {
  padding: 10px 20px 80px;
}
.colums_left_middle .leftIcon {
  position: absolute;
  top: calc((100% - 100px) / 2);
  right: -10px;
  background: #cccccc;
  border-radius: 3px;
  width: 10px;
  height: 100px;
  font-size: 12px;
  color: #ffffff;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.colums_left_bot {
  font-size: 14px;
  padding-top: 10px;
  padding: 10px 150px 0;
}
.botIcon {
  color: #409EFF;
  font-weight: bolder;
}
.set-form {
  display: flex;
  padding-bottom: 8px;
}
.set-label1 {
  width: 50px;
  margin-right: 10px;
  text-align: right;
  line-height: 28px;
}
.set-label2 {
  width: 90px;
  margin-right: 10px;
  text-align: right;
  line-height: 28px;
}
.colums_right {
  width: 300px;
  background-color: rgb(250, 250, 250);
}
.colums_right_box {
  padding: 0 10px 10px 10px;
  font-size: 12px;
}
.colums_right_box_title {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}
.colums_right_box_title .link {
  color: #999999;
  font-weight: normal;
  cursor: pointer;
}
.colums_right_box_title .link:hover {
  color: #409EFF;
}
.colums_right .el-tabs__item {
  font-size: 12px;
  padding: 0 10px;
  color: #555555;
}
.colums_right .el-tabs__item.is-active {
    color: #409EFF!important;
}
.colums_right .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 10px;
}
.colums_right_box .template {
  padding: 5px 15px;
}
.colums_right_box .template li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style: inside;
}
.colums_right_box_tips {
  color: #999999;
}
.colums_right_box_typeBox {
  display: flex;
  padding-top: 10px;
}
.colums_right_box_typeBox .typeBox {
  width: 33.3%;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0px 6px 6px 0px rgba(122,133,155,0.2);
  color: #ffffff;
  margin: 0 5px;
}
.colums_right_box_typeBox .type1 {
  background-color: #2085EC;
}
.colums_right_box_typeBox .type2 {
  background-color: #05CE9D;
}
.colums_right_box_typeBox .type3 {
  background-color: #32BEF2;
}
.colums_right_box_end {
  display: flex;
  padding-top: 15px;
}
.colums_right_box_end .endBox {
  flex: 1 1;
  display: flex;
  position: relative;
}
.colums_right_box_end .endBox .arrow1 {
  z-index: 1;
  position: absolute;
  left: -9px;
  top:3px;
  width: 0;
  height: 0;
  border-right: 10px solid #E2EAF1;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.colums_right_box_end .endBox .arrow2 {
  z-index: 2;
  position: absolute;
  left: -7px;
  top: 5px;
  width: 0;
  height: 0;
  border-right: 8px solid #ffffff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.colums_right_box_end .endBox .item_content {
  flex: 1 1;
  position: relative;
  background-color: #fff;
  border: 1px solid #E2EAF1;
  padding: 10px 20px;
}
.colums_right_box_end .el-icon-help {
  margin-right: 10px;
  margin-top: 5px;
  font-size: 18px;
  color: #999999;
}
</style>
